<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script th:src="@{~/managed/assets/js/bootstrap-tag.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{~/managed/fileinput/css/fileinput.min.css}" />
<script th:src="@{~/managed/fileinput/js/fileinput.min.js}"></script>
<script th:src="@{~/managed/fileinput/js/locales/zh.js}"></script>
<script type="text/javascript" th:src="@{~/managed/wangEditor/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{~/managed/assets/js/jquery.form.js}"></script>
<body>   
	<div class="modal-dialog" style="width:80%">
		<div class="modal-content" >
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					<p>编辑文章</p>
				</div>
			</div>

			<div class="modal-body no-padding" >

			<form class="form-horizontal" enctype="multipart/form-data" id="articleForm" role="form" th:action="@{/manage/article/editArticle}" method="post" th:object="${article}">
			    <input type="hidden" th:field="*{articleId}" />
			    <input type="hidden" th:field="*{articlePath}" />
				<div class="form-group">
					<label class="col-sm-1 control-label no-padding-right"> 文章标题 </label>
					<div class="col-sm-9">
						<input type="text" class="col-xs-10 col-sm-7" th:field="*{articleTitle}" />
					</div>
				</div>
                <div class="form-group">
					<label class="col-sm-1 control-label no-padding-right">分类 </label>
					<div class="col-sm-9">
					    <select class="col-xs-10 col-sm-4" th:field="*{cate.cateId}">
					         <option th:each="cate : ${cateList}" th:value="${cate.cateId}">
					          <span th:text="${cate.cateName}"></span>
					         </option>
					    </select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label no-padding-right">文章状态 </label>
					<div class="col-sm-9">
					    <select class="col-xs-10 col-sm-2" th:field="*{articleStatus}">
					         <option value="1">激活</option>
					         <option value="0">未激活</option>
					    </select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label no-padding-right">文章概述 </label>
					<div class="col-sm-9">
					    <textarea rows="4" class="col-xs-10 col-sm-7" th:field="*{articleDescription}"></textarea>
					</div>
				</div>

                         <div class="form-group">
					<label class="col-sm-1 control-label no-padding-right">关键词</label>

					<div class="col-sm-9">
						<input type="text" class="col-xs-10 col-sm-7" th:field="*{articleKeywords}" id="form-field-tags" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-1 control-label no-padding-right"> 缩略图 </label>
					<div class="col-sm-9">
						<input id="thumbnail" type="file" name="file"   /> 
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-1 control-label no-padding-right"
						for="form-input-readonly">内容</label>

					<div class="col-sm-11">
						<div id="editor"></div>	
						<input id="articleContent" type="hidden" name="articleContent" />
						<input id="picture" type="hidden" name="picture" />							
					</div>
				</div>
			<div class="modal-footer no-margin-top">
				<button class="btn btn-sm pull-left" data-dismiss="modal">
					<i class="icon-remove"></i>关闭&nbsp;
				</button>
				<button class="btn btn-sm btn-info pull-right"
					onclick="saveRecord()" type="button">
					<i class="icon-ok"></i>提交
				</button>
			</div>
			</form>
		</div>
	</div>
</div>
<script th:inline="javascript">
   
	var tag_input = $('#form-field-tags');
	try{
		tag_input.tag(
		  {
			source: ace.vars['US_STATES'],				
		  }
		)
		var $tag_obj = $('#form-field-tags').data('tag');		
		var index = $tag_obj.inValues('some tag');
		$tag_obj.remove(index);
	}
	catch(e) {		
		tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="4">'+tag_input.val()+'</textarea>').remove();
	}
	
	var imagePath = [[${article.articleThumbnail}]]
	$('#thumbnail').fileinput({ 
	    language : 'zh',   
	    showUpload: false,//是否显示上传按钮  
	    showRemove: false,//是否显示删除按钮  
	    showCaption: false,//是否显示输入框  
	    showPreview:true,   
	    showCancel:true,  
	    dropZoneEnabled: false,
	    allowedPreviewTypes : [ 'image' ],
	    allowedFileExtensions : [ 'jpg', 'png', 'gif','jpeg' ],
	    initialPreview: [
	        '<img src="'+imagePath+'" class="file-preview-image kv-preview-data rotate-1" style="width:auto;height:160px;"/>'
	     ], 
	})
	
	var content = [[${article.articleContent}]]
	var E = window.wangEditor;
	var editor = new E('#editor');
	editor.customConfig.uploadImgServer = /*<![CDATA[*/'/manage/uploadImage'/*]]>*/;
	editor.customConfig.uploadFileName = 'image';
	editor.create();
	editor.txt.html(content);
    
    function saveRecord() {
    	var picture = "";
        $("#editor").find("img").each(function(){
            var path =  $(this).attr("src");
            if (path.indexOf("http") == -1 ) {
            	picture +=  path + ",";
			}                   
        });
        $("#picture").val(picture);
        var html = editor.txt.html();
        $("#articleContent").val(html);
		var article_form = $("#articleForm");
		var table = $("#manager-table");
		ajax_form(article_form,null,table);
	}
</script>
<script type="text/javascript" th:src="@{~/managed/common/blog.js}"></script>
</body>
</html>